<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Metronic Admin Theme #1 | Form Layouts</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Preview page of Metronic Admin Theme #1 for form layouts" name="description" />
    <meta content="" name="author" />

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../../global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" />
    <link href="../../global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../../global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="../../custom/css/changeother.css"/>
<body>
<div class="contentPadding">
    <div class="portlet-body">
            <table id="example3" class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>字段</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tBody3">

                </tbody>
            </table>
    </div>
</div>

<!--搜索字段的表格渲染-->
<script id="tpl3" type="text/html">
    <%for(var i = 0; i < list.length; i++) {%>
    <tr>
        <td><%:=(i+1)%></td>
        <td class="searchFields" data-index="<%:=(list[i].columnId)%>"><%:=(list[i].columnChname+'(' +list[i].columnName+')')%></td>
        <td><a href="javascript:;" class="searchTable tableHref">确认</a></td>
    </tr>
    <%}%>
</script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="../../global/plugins/datatables/datatables.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="layui/layui.all.js"></script>
<script src="js/template.js"></script>
<script>
    console.log('初始对象所有字段---', parent.resourceAllField);
    console.log('初始对象id---'+parent.resourcefieldId);

    //搜索字段
    var columns = {'list':parent.resourceAllField};
    $('#tBody3').html(template($('#tpl3').html(), columns));

    //模糊查询
    $('#example3').DataTable({
        paging: false,
        ordering:  false,
        language : {
            search : '搜索：'
        },
        info: false,
    });

    //选择字段
    $('#example3').on('click','a',function () {
        console.log($(this).parent().prev().attr('data-index'));
        console.log($(this).parent().prev().text());

        var currentField = $(this).parent().prev().text(); //当前选择的字段名
        var cell = parent.graph.getCell(parent.resourcefieldId);  //元素model
        var cellView =  parent.paper.findViewByModel(cell);     //元素view
        var contentStr; //content字符串
        //如果选择字段与画布字段不相同
        if($(this).parent().prev().attr('data-index') !== cell.attributes.attrs.fieldId){

            cellView.$el.find('.erFieldInfo').text(currentField);   //元素字段更换
            cellView.$el.find('.erFieldInfo').attr("title",currentField);   //元素字段更换
            contentStr = cellView.$el.find('.content').html(); //content字符串
            cell.attributes.attrs.div.html = contentStr; //model元素字段更换
            cell.attributes.attrs.fieldId = $(this).parent().prev().attr('data-index'); //当前的字段id
            cell.attributes.attrs.isLeftOpen = ''; //元素回到未展开之前
            cell.attributes.attrs.isRightOpen = '';//元素回到未展开之前
            parent.recursion(cell);         //画布删除其他元素
        }

        //关闭页面
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    });




</script>
</body>

</html>